<template>
  <div class="conetnt-page">
    <div class="page-top">
      <el-button type="primary" :icon="Back" @click="backEvent">返回</el-button>
      <el-button type="primary" :icon="Link" :disabled="pageState == 2" @click="saveSchedulingEvent(0)">{{ pageState == 1 ? '更新' : '保存'}}</el-button>
      <el-button type="primary" :icon="Star" :disabled="pageState == 2" @click="saveSchedulingEvent(1)">{{ pageState == 1 ? '保存并生效' : '更新并生效'}}</el-button>
    </div>
    <div class="page-content">
      <div class="content-left">
        <el-card style="width:100%;height:100%;" :body-style="{ height:'90%',padding:'10px',overflow:'auto' }">
          <template #header><span>生产订单信息</span></template>
            <div class="search-input" style="display: flex;align-items: center;">
              <span style="margin-right:5px;">生产订单</span>
              <el-input :value="scheduleForm.productOrder" placeholder="请选择生产订单" size="small" style="width: 200px">
                <template #append>
                  <el-button :icon="Search" @click="modalApi.open()" :disabled="pageState != 0"/>
                </template>
              </el-input>
            </div>
            <div class="order-desc">
              <div class="order-desc-item" v-for="item,index in orderDescList" :key="index">
                <span class="item-title">{{ item.desc }}</span>
                <p class="item-desc">{{ scheduleForm[item.key] }}</p>
              </div>
            </div>
        </el-card>
      </div>
      <div class="content-right">
        <div class="content-right-top">
          <el-card style="width:100%;height:100%;" :body-style="{ height:'93%',padding:'5px',overflow:'scroll' }">
            <template #header><span>产线排程</span></template>
              <Grid2>
                <template #toolbar-actions>
                  <el-button type="danger" :icon="Plus" @click="openLineModalEvent" :disabled="pageState != 0">选择产线</el-button>
                </template>
                <template #action="{ row }">
                  <el-button link @click="tableDeleteEvent(row)" :disabled="pageState != 0">删除</el-button>
                </template>
              </Grid2>
          </el-card>
        </div>
        <div class="content-right-bottom">
          <el-card style="width:100%;height:100%;" :body-style="{ height:'92%',padding:'0px',overflow:'scroll' }">
            <template #header><span>排产信息</span></template>
            <Grid3></Grid3>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 生产订单Modal -->
    <Modal title="选择生产订单" class="w-[60%] h-[70%]">
      <Grid></Grid>
    </Modal>
    <!-- 产线选择Modal -->
    <Modal2 title="选择产线" class="w-[30%] h-[30%]">
      <el-checkbox-group v-model="scheduleForm.lineCodesTmp">
        <el-checkbox v-for="line in scheduleForm.lineList" :label="line.name" :value="line.code"/>
      </el-checkbox-group>
    </Modal2>
  </div>
</template>

<script lang="ts" setup>
//@ts-ignore
import { useRouter,useRoute } from "vue-router";
import { ElMessage, ElMessageBox,ElNotification,ElInput,ElForm,ElFormItem,ElSelect,ElOption, ElDialog,ElButton,ElLoading,ElTag,ElDatePicker,ElCard,ElCheckboxGroup,ElCheckbox } from "element-plus";
import { Plus,Back,StarFilled,Search,Edit,Check,Star,Share,Link } from '@element-plus/icons-vue';
import { Button, Upload, RadioButton, RadioGroup } from "ant-design-vue";
import { useVbenVxeGrid } from "#/adapter/vxe-table";
import { useVbenModal,confirm } from '@vben/common-ui';
import { nextTick, ref, onUnmounted, onMounted,reactive, unref, watch } from "vue";
import { dealVxeGridFilterParameter,dayjs,getRandom,lodash,sleep } from "#/utils/tools";
import { reqProductOrders,reqLineListByGrid,reqCraftListByGrid,reqSaveLineScheduling,reqUpdateLineScheduling,reqLineSchedulingById } from "#/api/productionPlan/index.js";
const router = useRouter(),route = useRoute();
const { id,state } = route.query;
const pageState:any = ref(0);  //0-添加 1-修改 2-查看
//选择订单(明细)临时存储
const selectedOrders = ref(null);
//车间规划排产form
const scheduleForm = reactive({
  id:null,
  productOrder:"",
  gridName:"",
  instructionNumber:"",
  schedulingStartTime:"",
  schedulingEndTime:"",
  orderQuantity:"",
  materialName:"",
  materialCode:"",
  materialStandard:"",
  orderRequire:"",
  processList:[],
  lineList:[],
  lineCodesTmp:[],
  lineCodes:[],
  original:null
});
const orderDescList = [
  { desc:"排程车间",key:"gridName" },
  { desc:"制令号",key:"instructionNumber" },
  { desc:"排产开始时间",key:"schedulingStartTime" },
  { desc:"排产结束时间",key:"schedulingEndTime" },
  { desc:"排程数",key:"orderQuantity" },
  { desc:"产品编号",key:"materialCode" },
  { desc:"产品名称",key:"materialName" },
  { desc:"物料规格描述",key:"materialStandard" },
  { desc:"订单要求",key:"orderRequire" }
];
let quantityWarningNotification = null;

const [Modal, modalApi] = useVbenModal({ draggable:true,closeOnClickModal:false,footer:false });
const [Modal2, modalApi2] = useVbenModal({ draggable:true,closeOnClickModal:false,footer:true,onConfirm:selectLineListModalConfirm });

const gridOptions = ref({
  columns: [
    { title: "序号", type: "seq", width: 40,visible:true },
    { type: 'checkbox', title: '选择' },
    { 
      field:"productionOrderNumber",
      title:"生产订单号",
      width:"180",
      visible:true,
      filters: [""],
      filterRender: { name: "customizeFilter",type:"input" }
    },
    { 
      field:"saleOrderCode",
      title:"销售订单号",
      width:"180",
      filters: [""],
      filterRender: { name: "customizeFilter",type:"input" }
    },
    { 
      field:"instructionNumber",
      title:"制令号",
      width:"180",
      filters: [""],
      filterRender: { name: "customizeFilter",type:"input" }
    },
    { 
      field:"gridName",
      title:"车间名称",
      width:"120",
      filters: [""],
      filterRender: { name: "customizeFilter",type:"input" }
    },
    { field:"gripCode", title:"车间编号", width:"120" },
    { 
      field:"planTime",
      title:"排产时间",
      width:"120",
      filters:[{ data:"",checked:false }],
      filterRender:{ name:"customizeFilter",type:"date" }
    },
    { field:"quantity",title:"排产数量",width:"120" },
    { field:"orderQuantity",title:"订单数量",width:"150" },
    {
      field:"stateName",
      title:"状态",
      width:"120"
    },
    { field:"materialName", title:"物料名称", width:"150" },
    { field:"materialCode", title:"物料编码", width:"150"},
    { field:"materialStandard", title:"物料标准", width:"180" },
    { field:"orderRequire",title:"订单要求",width:"150" }
  ],
  toolbarConfig: {
    visible:false,
    search: false,
    custom: true,
    refresh: true,
    zoom: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'cell'
  },
  checkboxConfig: {
    highlight: true,
    showHeader: false
  },
  filterConfig: {
    remote: true
  },
  rowConfig: {
    isCurrent: true,
    isHover: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: true,
    pageSize: 20,
    pageSizes: [10, 20, 30, 50, 100]
  },
  height: "auto",
  proxyConfig: {
    autoLoad: true,
    ajax: {
      query: async ({ page }, formValues) => getProductionPlanListDetail({ page,formValues })
    }
  }
});
const gridEvents = {
  editClosed:({ row, column }) => {},
  checkboxChange: ({ checked, row }) => {
    gridApi.grid.clearCheckboxRow();
    if(checked) gridApi.grid.setCheckboxRow(row, true);
    selectedChange(checked,row);
  },
  filterChange({ filterList }) {
    const parameter = dealVxeGridFilterParameter(filterList);
    gridFilterParameter = parameter;
    gridApi.query();
  },
}
const [Grid, gridApi] = useVbenVxeGrid({formOptions: null,gridOptions: gridOptions,gridEvents: gridEvents});

const gridOptions2 = ref({
  columns: [
    { title: "序号", type: "seq", width:50 },
    { 
      field:"lineName",
      title:"产线",
      width:""
    },
    { 
      field:"scheduleTimeRange",
      title:"排产周期",
      width:"",
      editRender: { 
        name:"ElDatePicker",
        props:{ type:'datetimerange',rangeSeparator:"至",valueFormat:"YYYY-MM-DD HH:mm:ss" },
        autofocus: true
      },
      formatter:({ cellValue,row,column }) => {
        return cellValue[0] + "-" + cellValue[1];
      }
    },
    { 
      field:"scheduleQuantity",
      title:"排程数",
      width:"",
      editRender: { 
        name:"ElInputNumber",
        props:{ min:0,precision:0 },
        change:({row,column,oldValue,changeValue,tableList}) => lineScheduleQuantityChange({row,column,oldValue,changeValue,tableList}),
        autofocus: true
      }
    },
    { 
      field:"",
      title:"操作",
      width:"130",
      slots:{ default:"action" }
    }
  ],
  toolbarConfig: {
    zoom: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: false
  },
  checkboxConfig: {
    highlight: true
  },
  height: "100%",
  autoResize:true,
  editRules: {
    scheduleQuantity: [
      { required: true, message:'请输入排程数量',trigger: 'change' }
    ],
    scheduleTimeRange: [
      { required: true, message:'请输入排程时间',trigger: 'change' }
    ]
  },
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    autoClear:false,
    showStatus: true
  },
  data:[]
});
const [Grid2, gridApi2] = useVbenVxeGrid({formOptions: null,gridOptions: gridOptions2,gridEvents:null});


const gridOptions3 = ref({
  columns: [
    { title: "序号", type: "seq", width: 50 },
    { field:"procedureName", title:"工序", width:"150" },
    { type: 'checkbox',title:"是否启用", width:100 },
    { 
      field:"remark",
      title:"备注",
      width:"",
      editRender:{ name:"ElInput" }
    }
  ],
  toolbarConfig: {
    search: false,
    custom: false,
    export: false,
    refresh: false,
    zoom: true
  },
  filterConfig: {
    remote: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: false,
    pageSize: 10,
    pageSizes: [10, 20, 30, 50, 100]
  },
  height: "100%",
  autoResize:true,
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    showStatus: true,
    autoClear: false
  },
  checkboxConfig: {
    highlight: true,
    checkMethod: ({ row }) => {
      const state = unref(pageState);
      return state <= 0;
    }
  },
  data:[]
});
const gridEvents3 = {
  checkboxChange: ({ checked,row,rowIndex }) => checkboxChangeEvent({ checked,row,rowIndex })
}
const [Grid3, gridApi3] = useVbenVxeGrid({formOptions: null,gridOptions: gridOptions3,gridEvents: gridEvents3});



const checkboxChangeEvent = (option) => {
  const { checked,row,rowIndex } = option;
}

let gridFilterParameter = null;
const getProductionPlanListDetail = async (option:any) => {
  try {
    const { page,formValues } = option;
    const params = {
      page: page.currentPage,
      size: page.pageSize
    };
    if(gridFilterParameter) Object.assign(params,gridFilterParameter);
    const response = await reqProductOrders(params);
    return {
      total: response.data.totalElements,
      items: response.data.content
    };
  } catch (error) {
    ElNotification({title:'请求失败',message:'获取计划排产明细列表失败',type:'error'});
    return { total: 0, items: [] };
  }
};


const clearScheduleForm = () => {
  scheduleForm.productOrder = '';
  scheduleForm.gridName = '';
  scheduleForm.instructionNumber = '';
  scheduleForm.schedulingStartTime = '';
  scheduleForm.schedulingEndTime = '';
  scheduleForm.orderQuantity = '';
  scheduleForm.materialName = '';
  scheduleForm.materialCode = '';
  scheduleForm.materialStandard = '';
  scheduleForm.orderRequire = '';
  scheduleForm.original = null;
  scheduleForm.processList = [];
  scheduleForm.lineList = [];
  scheduleForm.lineCodes = [];
  //置空grid2列表数据
  gridApi2.grid.loadData([]);
  gridApi3.grid.loadData([]);
}

//选择生产订单
const selectedChange = (checked:boolean,row:any) => {
  const { productionOrderNumber,gridName,instructionNumber,schedulingStartTime,schedulingEndTime,orderQuantity,materialName,materialCode,materialStandard,orderRequire } = row;
  selectedOrders.value = null;
  checked ? selectedOrders.value = row : selectedOrders.value = null;
  if(checked){
    scheduleForm.productOrder = productionOrderNumber;
    scheduleForm.gridName = gridName;
    scheduleForm.instructionNumber = instructionNumber;
    scheduleForm.schedulingStartTime = schedulingStartTime;
    scheduleForm.schedulingEndTime = schedulingEndTime;
    scheduleForm.orderQuantity = orderQuantity;
    scheduleForm.materialName = materialName;
    scheduleForm.materialCode = materialCode;
    scheduleForm.materialStandard = materialStandard;
    scheduleForm.orderRequire = orderRequire;
    scheduleForm.original = row;
    getLineListByGrid();
    getCraftListByGrid();
    setTimeout(() => { modalApi.close() },300);
  } else {
    clearScheduleForm();
  }
  console.log('勾选的行数据====>',row);
}

//选择产线按钮
const openLineModalEvent = () => {
  const order = scheduleForm.original;
  if(!order){
    return ElNotification({title:'提示',message:'请先在左侧选择一个生产订单',type:'warning'});
  }
  modalApi2.open();
  scheduleForm.lineCodesTmp = scheduleForm.lineCodes;
}


// 组装接口参数
const assembleParams = (state) => {
  const { id,original,schedulingStartTime,schedulingEndTime,productOrder,orderQuantity } = scheduleForm;
  const { tableData } = gridApi2.grid.getTableData();
  const scheduleLineList = lodash.cloneDeep(tableData);
  const selectedProcessList = gridApi3.grid.getCheckboxRecords();
  const { materialId,materialCode,materialName,instructionNumber,gridCode,gridName } = original;
  const lineSchedulingMaterialList = [];
  let totalSchedulingQuantity = 0;
  for(let k = 0; k < scheduleLineList.length; k ++){
    const {lineCode,lineName,scheduleQuantity,scheduleTimeRange,id,randomId} = scheduleLineList[k];
    totalSchedulingQuantity =  totalSchedulingQuantity + scheduleQuantity;
    const obj = {
      id:id ? id : '',
      lineCode,
      lineName,
      schedulingQuantity:scheduleQuantity,
      lineSchedulingStartTime:scheduleTimeRange[0],
      lineSchedulingEndTime:scheduleTimeRange[1],
      procedureList:selectedProcessList
    }
    lineSchedulingMaterialList.push(obj);
  }
  const parameter = {
    id:id ? id : '',
    state,
    productOrderNumber:productOrder,
    materialId,
    materialCode,
    materialName,
    materialSpecification:"",
    planQuantity:orderQuantity,
    schedulingQuantity:totalSchedulingQuantity,
    instructionNumber,
    gridCode,
    gridName,
    craftId:selectedProcessList[0].craftId,
    craftName:selectedProcessList[0].name,
    craftCode:"",
    procedureList:selectedProcessList,
    lineSchedulingMaterialList,
    schedulingStartTime,
    schedulingEndTime
  }
  return parameter;
};
const saveOrUpdateScheduling = (state) => {
  let executeFunction = null;
  if(unref(pageState) == 0){
    executeFunction = reqSaveLineScheduling;
  }
  if(unref(pageState) == 1){
    executeFunction = reqUpdateLineScheduling;
  }
  const loading = ElLoading.service({lock: true,text: "加载中...",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",});
  const parameter = assembleParams(state);
  console.log("请求参数===>",parameter);
  executeFunction(parameter).then((response) => {
    ElNotification({title:'提示',message:`${unref(pageState) == 1 ? '更新成功' : '保存成功'}`,type:'success'});
    clearScheduleForm();
  }).catch((error) => {
    ElNotification({title:'提示',message:`${unref(pageState) == 1 ? '更新失败,请重试' : '保存失败,请重试'}`,type:'error'});
  }).finally(() => {
    loading.close();
  });
};
const saveSchedulingEvent = async (type = 0) => {
  const { original } = scheduleForm;
  const { tableData } = gridApi2.grid.getTableData();
  const scheduleLineList = lodash.cloneDeep(tableData);
  const selectedProcessList = gridApi3.grid.getCheckboxRecords();
  if(!original){
    return ElNotification({title:'提示',message:'请先在左侧选择一条排产信息并进行排产后保存!',type:'warning'});
  }
  if(!scheduleLineList.length){
    return ElNotification({title:'提示',message:'请先选择产线排产后再进行保存!',type:'warning'});
  }
  let validateScheduleLineData = true;
  await sleep(300);
  await gridApi2.grid.validate().then(async (errMap) => {
    if (errMap) validateScheduleLineData = false;
  });
  if(!validateScheduleLineData){
    return ElNotification({title:'提示',message:'请将产线排程数量填写完整',type:'warning'});
  }
  if(!selectedProcessList.length){
    return ElNotification({title:'提示',message:'请先勾选工序后再进行保存!',type:'warning'});
  }
  console.log('即将要保存的一些数据===>',original,scheduleLineList,selectedProcessList);
  confirm({content: '确定保存排产数据吗?',icon: 'success'}).then(async() => {
    saveOrUpdateScheduling(type);
  });
}

//通过车间获取工艺路线
const getCraftListByGrid = () => {
  return new Promise((resolve,reject) => { 
    const { gridCode,gridName } = scheduleForm.original;
    const params = {
      gridCode:gridCode
    };
    reqCraftListByGrid(params).then((response) => {
      const list = response.data || [];
      scheduleForm.processList = list;
      gridApi3.grid.loadData(list);
      resolve(true);
    },error => {
      ElNotification({title:'提示',message:`工艺列表获取失败${error.data?.message}`,type:'error'});
      reject(error);
    });
  });
}

//通过车间获取产线列表
const getLineListByGrid = () => {
  const {gridCode,gridName} = scheduleForm.original;
  const params = {
    gridCode:gridCode
  };
  reqLineListByGrid(params).then((response) => {
    scheduleForm.lineList = response.data || [];
  },error => {
    ElNotification({title:'提示',message:`产线列表获取失败${error.data?.message}`,type:'error'});
  });
}

const addTableRowEvent = async () => {
  const { lineCodes,lineList,schedulingStartTime,schedulingEndTime } = scheduleForm;
  const { fullData, visibleData, tableData, footerData } = gridApi2.grid.getTableData();
  const isSchedulingLineCodes = tableData.map(v => v.lineCode);
  const needSchedulingLineCodes = lineCodes.filter(code => !isSchedulingLineCodes.includes(code));
  for(let l = 0; l < needSchedulingLineCodes.length; l++){
    const lineInfo = lineList.find(v => v.code == needSchedulingLineCodes[l]);
    const newRow = {
      id:'',
      randomId:getRandom(),
      scheduleQuantity:0,
      scheduleTimeRange:[schedulingStartTime,schedulingEndTime],
      lineCode:lineInfo ? lineInfo.code : '',
      lineName:lineInfo ? lineInfo.name : ''
    };
    const { row,rows } = await gridApi2.grid.insert(newRow);
  }
};
const deleteTableRowEvent = () => {
  const { lineCodes,lineList } = scheduleForm;
  const { fullData, visibleData, tableData, footerData } = gridApi2.grid.getTableData();
  const tableListLineCodes = tableData.map(v => v.lineCode);
  const removedLines = tableListLineCodes.filter(code => !lineCodes.includes(code));
  for(let i = 0; i < removedLines.length; i ++){
    const row = tableData.find(val => val.lineCode == removedLines[i]);
    if(row) gridApi2.grid.remove(row);
  }
}
const lineCodesChange = () => {
  const { lineCodes,lineList } = scheduleForm;
  const { fullData, visibleData, tableData, footerData } = gridApi2.grid.getTableData();
  const tableListLineCodes = tableData.map(v => v.lineCode);
  if(!lineCodes.length) gridApi2.grid.loadData([]);
  const addedLines = lineCodes.filter(code => !tableListLineCodes.includes(code));
  const removedLines = tableListLineCodes.filter(code => !lineCodes.includes(code));
  if(addedLines.length){
    addTableRowEvent();
  }
  if(removedLines.length){
    deleteTableRowEvent();
  }
}

//产线Modal选择confirm
function selectLineListModalConfirm(){
  const { lineCodesTmp } = scheduleForm;
  scheduleForm.lineCodes = lineCodesTmp;
  scheduleForm.lineCodesTmp = [];
  lineCodesChange();
  modalApi2.close();
}

const tableDeleteEvent = (row:any) => {
  const { lineCode } = row;
  gridApi2.grid.remove(row);
  scheduleForm.lineCodes = scheduleForm.lineCodes.filter(code => code != lineCode);
}


//通过id获取产线排产数据
const getLineSchedulingById = async () => {
  const id = route.query.id;
  try {
    const response = await reqLineSchedulingById(id);
    const { productOrderNumber,state,materialId,materialCode,materialStandard,materialName,planQuantity,schedulingQuantity,schedulingStartTime,schedulingEndTime } = response.data;
    const { instructionNumber,gridCode,gridName,procedureList,lineSchedulingMaterialList,craftId,craftName,craftCode,orderRequire } = response.data;
    scheduleForm.id = id;
    scheduleForm.productOrder = productOrderNumber;
    scheduleForm.gridName = gridName;
    scheduleForm.instructionNumber = instructionNumber;
    scheduleForm.schedulingStartTime = schedulingStartTime;
    scheduleForm.schedulingEndTime = schedulingEndTime;
    scheduleForm.orderQuantity = planQuantity;
    scheduleForm.materialName = materialName;
    scheduleForm.materialCode = materialCode;
    scheduleForm.materialStandard = materialStandard;
    scheduleForm.orderRequire = orderRequire;
    scheduleForm.original = response.data;
    const lineCodes = [];
    const lineScheduleTableList = [];
    for(let o = 0; o < lineSchedulingMaterialList.length; o ++){
      const {id,lineCode,lineName,schedulingQuantity,lineSchedulingStartTime,lineSchedulingEndTime} = lineSchedulingMaterialList[o];
      lineCodes.push(lineCode);
      const obj = {id,scheduleQuantity:schedulingQuantity,lineCode,lineName,scheduleTimeRange:[lineSchedulingStartTime,lineSchedulingEndTime]};
      lineScheduleTableList.push(obj);
    }
    scheduleForm.lineCodes = lineCodes;
    gridApi2.grid.loadData(lineScheduleTableList);
    getLineListByGrid();
    await getCraftListByGrid();
    const selectedProcessIds = procedureList.map(v => v.procedureId);
    const {tableData} = gridApi3.grid.getTableData();
    gridApi3.grid.setCheckboxRow(tableData.filter(v => selectedProcessIds.includes(v.procedureId)),true);
  } catch (error) {
    console.log(error);
    ElNotification({title:'提示',message:`产线排产数据获取失败${error.response?.message}`,type:'warning'});
  }
}

onMounted(() => {
  if(state) pageState.value = state;
  if(id && unref(pageState) > 0){
    getLineSchedulingById();
  }
});


const lineScheduleQuantityChange = (option:any) => {
  const orderQuantity = Number(scheduleForm.orderQuantity);
  const { row,column,changeValue,oldValue,tableList } = option;
  const scheduledQuantity = tableList.reduce((pre,cur) => pre + cur.scheduleQuantity,0);
  if(scheduledQuantity > orderQuantity){
    quantityWarningNotification === null ? quantityWarningNotification = ElNotification({title:'提示',message:"当前排程总数已超过订单排程数",type:'warning',onClose:() => quantityWarningNotification = null}) : null;
    //row.scheduleQuantity = oldValue;
  }
}

const backEvent = () => {
  router.back();
}

const dealProcess = (option:any) => {
  const { processIds,processList } = option;
  const selectedProcessList = [];
  for(let k = 0; k < processIds.length; k ++){
    const processId = processIds[k];
    const process = processList.find(val => val.procedureId == processId);
    if(!process) break;
    const { sequence,procedureName,supProcedureName,isLastProcedure } = process;
    const curProcess = { ...process };
    if(supProcedureName){
      const sup = processList.find(val => val.procedureName == supProcedureName);
      curProcess.supProcedureId = sup.procedureId;
    }
    selectedProcessList.push(curProcess);
  }
  const selectedProcessNames = selectedProcessList.map(val => val.procedureName).join('->');
  return [selectedProcessNames,selectedProcessList];
}

const dealStatus = (status:number|string = 0) => {
  status = Number(status);
  let desc = "";
  switch (status) {
    case 0:
      desc = "创建";
      break;
    case 1:
      desc = "生效";
      break;
    case 2:
      desc = "完成";
      break;
    case 3:
      desc = "关闭";
      break;
    case 4:
      desc = "取消";
      break;
    default:
      desc = "未知";
  }
  return desc;
}
</script>

<style lang="scss" scoped>
.conetnt-page{
  width: 100%;
  height:100vh;
  box-sizing: border-box;
}
.page-top{
  width: 100%;
  height:45px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.page-content{
  width: 100%;
  height:calc(100% - 45px);
  display: flex;
  box-sizing: border-box;
}
.content-left{
  width: 25%;
  margin-right: 8px;
  .order-desc{
    width:100%;
    margin-top: 15px;
    .order-desc-item{
      width: 100%;
      margin: 10px 0;
      display: flex;
      .item-title{
        width:100px;
        font-size:13px;
        font-weight: bold;
      }
      .item-desc{
        font-size:13px;
        width:calc(100% - 100px);
      }
    }
  }
}
.content-right{
  width: 75%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .content-right-top{
    width:100%;
    height: 50%;
    margin-bottom: 8px;
  }
  .content-right-bottom{
    width:100%;
    height: 50%;
  }
}

:deep(.el-form-item__content){
  flex-wrap: nowrap !important;
}
:deep(.el-card .el-card__header){
  padding:8px 20px !important;
}
</style>